<script lang="ts" setup>
import { ref } from "vue";
import defaultImg from "@/assets/defaultImg";
type ImgStatus = "error" | "retry" | "success" | "loading";
import Download from "@/components/icons/IconArrowDown.vue";
  /*   功能实现：
1. url，url不对时，图片加载不成功，有个默认兜底的灰底
2. 可以重新加载的点击功能
3. 重新加载是达到一定次数时，显示加载失败
 */
    const props = defineProps({
      imgUrl: {
      type: String,
      required: true,
    },
    defaultUrl: {
      type: String,
    },
    desAlt: {
      type: String,
      required: false,
    },
    width: {
      type: String,
      required: true,
    },
    height: {
      type: String,
      required: true,
    },
    style: {
      type: Object,
      required: false,
    },
    retry: {
      type: Number,
      default: 3,
      required: false,
    }
    });

    let times = 0;
    const status = ref<ImgStatus>("loading");
    const imgRef = ref<null | HTMLImageElement>(null);

    // 图片加载失败
    function handleError(e) {
      if (!props.imgUrl || times >= props.retry) {
        const defaultUrl = props.defaultUrl;
        status.value = "error";
        imgRef.value && (imgRef.value.src = defaultUrl || defaultImg);
        return;
      }
      status.value = "retry";
    }
    // 图片加载成功
    function handleSuccess(e) {
      console.log("handleSuccess", e);
      status.value = "success";
    }

    // 重载图片
    function reloadImg() {
      console.log("reloadImg");
      if (status.value !== "retry") {
        return;
      }
      imgRef.value && (imgRef.value.src = props.imgUrl);
      status.value = "loading";
      times++;
    }

</script>

<template>
  <div
    :class="['img-wrap', status]"
    :style="{ width: width, height: height }"
    @click="reloadImg"
  >
    <img
      v-if="status !== 'retry'"
      :src="imgUrl"
      :alt="desAlt"
      :style="[{ ...style, width, height }]"
      @error="handleError"
      @load="handleSuccess"
      :title="desAlt"
      ref="imgRef"
    />
    <Download v-if="status === 'retry'" class="download" title="点击重载图片"></Download>
    
  </div>
</template>


<style lang="scss" scoped>
@keyframes loading {
  0% {
    color: #ece3e3;
  }
  100% {
    color: rgb(85, 83, 83);
  }
}
.img-wrap {
  position: relative;
  display: inline-block;
}
.img-wrap.loading {
  &:after {
    content: "loading...";
    color: rgb(85, 83, 83);
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    transform: translateY(-50%);
    left: 0;
    animation: loading 1s linear alternate-reverse infinite;
  }
}
.retry {
  background: #ccc;
  cursor: pointer;
}
.download {
  &:hover {
    transition: 0.1s all linear;
    width: 40%;
    height: 40%;
  }
  transition: 0.1s all linear;
  width: 30%;
  height: 30%;
  margin: auto auto;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
// 加载失败后显示的文字
img.error {
  background-color: #ccc;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  font-size: 14px;
}
</style>
